<template>
  <div id="editorContainer" style="height: 400px"></div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from "vue";
  import * as monaco from "monaco-editor";
  import fixUncaughtError from "./index";

  const props = defineProps<{
    value: string;
    language: string;
  }>();

  const emit = defineEmits<{
    (e: "change", value: string): void;
  }>();

  const editor = ref(null);

  onMounted(() => {
    console.log(monaco.editor);
    fixUncaughtError(); // fixes the error

    monaco.editor.create(document.getElementById("editorContainer"), {
      value: props.value || "",
      language: props.language || "java",
      minimap: { enabled: true },
      colorDecorators: true,
      readOnly: false,
      theme: "vs-dark",
    });

    // editor.value = monaco.editor.create(document.getElementById("editorContainer"), {
    //   value: props.value || "",
    //   language: props.language || "java",
    //   minimap: { enabled: true },
    //   colorDecorators: true,
    //   readOnly: false,
    //   theme: "vs-dark",
    // });

    // editor.value.onDidChangeModelContent(() => {
    //   console.log(editor.value.getValue());
    //   // emit("change", editor.value.getValue());
    // });
  });
</script>
